<template>
  <div class="logoindex">
<!--      <div class="header">-->
        <div class="logo">图 书 管 理 系 统</div>
        <div class="login register">
          <div class="clear">
            <RouterLink to="/login-box" >
              <div class="item">
                <div class="bg" style="background-color: #fad44f"></div>
                <div class="inner">
                  <span>GO</span>
                </div>
              </div>
            </RouterLink>
          </div>
        </div>
<!--      </div>-->
<!--      <main>Main</main>-->
<!--      <footer>Footer</footer>-->
  </div>
</template>

<script>
export default {
  name: "Logo",
  methods: {
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    }
  }
}

</script>

<style>

.logoindex{
  position: relative;
  z-index: 2333;
  height: 100vh;
  width: 80vw;
  display: inline;
  float: right ;
}
.logo{
  display: block;
  font-size: 50px;
  color: #ffffff;
  position: relative;
  width: max-content;
  top: 30%;
  left: 20%;
}
.main {
  background-color: #E9EEF3;
  color: #333;
  text-align: center;
  line-height: 3000px;
}
.login{
  position: relative;
  height: 20%;
  top:40%;
}
.clear{
  height: 100%;
  width: 20%;
  margin-left: 25%;
}
.clear .item {
  position: relative;
  width: 100%;
  height: 80px;
  line-height: 80px;
  margin: 10px 1.2%;
  padding: 5px 0;
  text-align: center;
  float: left;
  transition: .2s all;
  opacity: .9
}
.clear .item:hover {
  opacity: 1;
  transform: translateY(-10px);
  animation: index-link-active 1s cubic-bezier(.315, .605, .375, .925) forwards
}
.clear .item .inner {
  position: relative;
  font-size: 30px;
  color: #ffffff;
  z-index: 5
}
.clear .item:hover .inner {
  color: white;
}
.clear .item .bg {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1%;
  z-index: 0;
  transition: .15s all
}
.clear .item:hover .bg {
  height: 100%;
  width: 100%;
  border-radius: 5px;
  box-shadow: 0 3px 20px rgba(0, 0, 0, .28)
}
@keyframes bg {
  0% {
    transform: rotate(0);
    border-radius: 0
  }
  50% {
    transform: rotate(180deg);
    border-radius: 0
  }
  100% {
    transform: rotate(360deg);
    border-radius: 0
  }
}

</style>

